<template>
    <h1>App.vue: provide/inject</h1>
    <label>
        <input v-model="colorVal" value="red" name="color" type="radio">
        红色
    </label>
    <label>
        <input v-model="colorVal" value="pink" name="color" type="radio">
        粉色
    </label>
    <label>
        <input v-model="colorVal" value="yellow" name="color" type="radio">
        黄色
    </label>

    <div class="box"></div>
    <hr>
    <proVideA></proVideA>
</template>

<script setup lang="ts">
import {ref, provide, readonly} from "vue";
import proVideA from '@/components/proVideA.vue'

const colorVal = ref<string>('pink')
provide('color', readonly(colorVal))
</script>

<style scoped lang="scss">
.box {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    margin: 20px 0;
    background: v-bind(colorVal);
}
</style>
